<template>
  <div class="set">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

      <!-- 网站设置 -->
      <el-tab-pane label="网站设置" name="first">

        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>

          <!-- 网站名称 -->
          <el-form-item label="网站名称" prop="sitename" :rules="[
            { required: true, message: '请输入网站名称' },
            { type: 'string', message: '请输入网站名称' },
          ]">
            <el-input v-model="ruleForm.sitename" />
          </el-form-item>

          <!-- 网站url -->
          <el-form-item label="网站url" prop="url" :rules="[
            { required: true, message: '请输入网站url' },
            { type: 'string', message: '请输入网站url' },
          ]">
            <el-input v-model="ruleForm.url" />
          </el-form-item>

          <!-- 关键字 -->
          <el-form-item label="关键字" prop="keywords" :rules="[
            { required: true, message: '请输入关键字' },
            { type: 'string', message: '请输入关键字' },
          ]">
            <el-input v-model="ruleForm.keywords" />
          </el-form-item>

          <!-- 简介 -->
          <el-form-item label="简介" prop="desc" :rules="[
            { required: true, message: '请输入简介' },
            { type: 'string', message: '请输入简介' },
          ]">
            <el-input v-model="ruleForm.desc" />
          </el-form-item>

          <!-- 版权 -->
          <el-form-item label="版权" prop="copyright" :rules="[
            { required: true, message: '请输入版权' },
            { type: 'string', message: '请输入版权' },
          ]">
            <el-input v-model="ruleForm.copyright" />
          </el-form-item>

          <!-- 小程序ID -->
          <el-form-item label="小程序ID" prop="miniappid" :rules="[
            { required: true, message: '请输入小程序id' },
            { type: 'string', message: '请输入小程序id' },
          ]">
            <el-input v-model="ruleForm.miniappid" />
          </el-form-item>

          <!-- 小程序秘钥 -->
          <el-form-item label="小程序秘钥" prop="minisecret" :rules="[
            { required: true, message: '请输入小程序秘钥' },
            { type: 'string', message: '请输入小程序秘钥' },
          ]">
            <el-input v-model="ruleForm.minisecret" />
          </el-form-item>

          <!-- 公众号ID -->
          <el-form-item label="公众号ID" prop="appid" :rules="[
            { required: true, message: '请输入公众号' },
            { type: 'string', message: '请输入公众号' },
          ]">
            <el-input v-model="ruleForm.appid" />
          </el-form-item>

          <!-- 公众号秘钥 -->
          <el-form-item label="公众号秘钥" prop="appsecret" :rules="[
            { required: true, message: '请输入公众号秘钥' },
            { type: 'string', message: '请输入公众号秘钥' },
          ]">
            <el-input v-model="ruleForm.appsecret" />
          </el-form-item>

          <!-- 微信小程序图片 -->
          <el-form-item label="微信小程序图片：" :rules="[
            { required: true, message: '请上传微信小程序图片' },
            { type: 'string', message: '请上传微信小程序图片' },
          ]">
            <el-upload class="avatar-uploader" action="http://121.42.230.80/api/mini/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="ruleForm.minibanner" :src="ruleForm.minibanner" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>

        </el-form>

      </el-tab-pane>

      <!-- 离校二维码 -->
      <el-tab-pane label="离校二维码" name="second" class="second">

        <img :src="imgSrc" alt="" id="picurl">
        <span class="span" @click="download">下载二维码</span>

      </el-tab-pane>

      <!-- From表单设置 -->
      <el-tab-pane label="From表单设置" name="third">

        <el-button type="success" class="button" @click="add" v-if="addAmend == true">添加</el-button>
        <el-button class="button" @click="add" v-else>返回</el-button>

        <!-- 表格 -->
        <el-table :data="tabData" style="width: 100%" border height="625" v-if="addAmend == true">
          <el-table-column align="center" prop="fieldname" label="核销人项目" />
          <el-table-column align="center" prop="is_null" label="是否启用">
            <template #default="scope">
              <div>
                <el-switch v-model="scope.row.is_null" class="mb-2" active-color="green" inactive-color="#ccc"
                  :active-value="1" :inactive-value="0" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope"> <!---->

              <el-button type="info" @click="modification(scope.row)">修改</el-button>
              <el-button type="danger">删除</el-button>

            </template>
          </el-table-column>

        </el-table>


        <!-- 添加页面 -->
        <div v-if="addAmend == false">
          <el-form :model="form" label-width="120px">

            <el-form-item label="Form表单名" prop="fieldname">
              <el-input v-model="form.formdata.fieldname" class="input" />
            </el-form-item>

            <el-form-item label="是否开启">
              <el-switch v-model="form.formdata.is_null" class="mb-2" active-color="green" inactive-color="#ccc"
                :active-value="1" :inactive-value="0" />
            </el-form-item>

            <el-form-item>

              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="confirmAdd">确定</el-button>

            </el-form-item>

          </el-form>
        </div>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script setup lang='ts'>
import { systemctlField, systemctlEdit, settinglist } from "../../api/visituser";
import { systemctl } from "../../api/visituser";
import { reactive, ref } from 'vue'
import type { TabsPaneContext, UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'


// tab切换
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


// 上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  ruleForm.value.minibanner = URL.createObjectURL(uploadFile.raw!) //临时路径
  console.log(response); //真实路径
  ruleForm.value.minibanner = response.data //赋值
}

// 表单数据
let ruleForm: any = ref([])

let geTsystemctl = async () => {
  let res: any = await systemctl()
  ruleForm.value = res.data[0]
}
console.log(ruleForm);
geTsystemctl()

// 提交
let submit = async () => {
  let res: any = await settinglist({
    id: ruleForm.value.id,
    formdata: ruleForm.value
  })
  console.log(res);

  if (res.code === '00000') {
    ElNotification({
      title: '成功',
      message: '添加成功',
      type: 'success',
    })

    addAmend.value = true
    geTsystemctlField()//刷新数据
  } else {
    ElNotification({
      title: '失败',
      message: '添加失败',
      type: 'error',
    })
  }

}


// 下载图片
let imgSrc: any = ref('http://visitor.lening365.cn/static/img/20220424145635.b81a2f62.jpg')
let download = () => {
  window.open(imgSrc.value) //下载
}



// form表格
let tabData = ref([])

let geTsystemctlField = async () => {
  let res = await systemctlField()
  console.log(res)
  tabData.value = res.data.reverse()  //reverse() 字符串翻转
}
geTsystemctlField()

let addAmend = ref(true)



// 重置
let reset = () => {
  form.formdata.fieldname = ''
  form.formdata.is_null = 0
}


// 添加/修改
let add = () => {
  addAmend.value = !addAmend.value
}

// 修改回显
let modification = async (val: any) => {
  addAmend.value = false
  form.formdata.fieldname = val.fieldname //回显
  form.formdata.is_null = val.is_null //回显
  form.id = val.id //有id表示 编辑 没有id 表示添加
}

// 添加/修改
let form = reactive({
  id: null,
  formdata: {
    fieldname: '',
    is_null: 1
  }
})

let confirmAdd = async () => {
  if (form.id == null) { //添加
    let res: any = await systemctlEdit(form)
    console.log(res);
    if (res.code === '00000') {
      ElNotification({
        title: '成功',
        message: '添加成功',
        type: 'success',
      })

      addAmend.value = true
      geTsystemctlField()//刷新数据
    } else {
      ElNotification({
        title: '失败',
        message: '添加失败',
        type: 'error',
      })
    }
  } else {  //修改
    let res: any = await systemctlEdit(form)
    console.log(res);
    if (res.code === '00000') {
      ElNotification({
        title: '成功',
        message: '修改成功',
        type: 'success',
      })

      addAmend.value = true
      geTsystemctlField()//刷新数据
    } else {
      ElNotification({
        title: '失败',
        message: '修改失败',
        type: 'error',
      })
    }
  }
}

</script>

<style scoped lang='less'>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


.upload-demo {
  width: 500px;
}

.avatar-uploader {
  border: 1px dashed #ccc !important;
  border-radius: 10px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.demo-ruleForm {
  width: 500px;
}

.second {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: green;
  margin-top: 100px;

  img {
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
  }

}

.span {
  cursor: pointer;
}

.button {
  margin-bottom: 20px;
}

.input {
  width: 300px;
}

/deep/.el-form-item__content{
  line-height:0px !important;
}

</style>